<!DOCTYPE html>
<html>
<head>
    <title>Insert and delete @viewport rule</title>
    <script src="../../resources/testharness.js"></script>
    <script src="../../resources/testharnessreport.js"></script>
    <style>
        html { width: 100%; height: 100%; }
    </style>
    <script>
        if (window.testRunner) {
            internals.settings.setViewportEnabled(true);
        }

        var t1 = async_test("Check that added @viewport rule is applied.");
        var t2 = async_test("Check that @viewport rule is not applied after removal.");

        onload = function(){

            var origWidth = document.documentElement.offsetWidth;
            var origHeight = document.documentElement.offsetHeight;

            document.styleSheets[0].insertRule("@viewport { width: 400px; height: 400px; }", 0);

            t1.step(function(){
               assert_equals(document.documentElement.offsetWidth, 400, "Width is 400px.");
               assert_equals(document.documentElement.offsetHeight, 400, "Height is 400px.");
            });
            t1.done();

            document.styleSheets[0].deleteRule(0);

            t2.step(function(){
               assert_equals(document.documentElement.offsetWidth, origWidth, "Width is default width.");
               assert_equals(document.documentElement.offsetHeight, origHeight, "Height is default height.");
            });
            t2.done();
        };
    </script>
</head>
<body style="overflow: hidden">
    <div id="log"></div>
</body>
</html>
